<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { ref } from 'vue';

const { t } = useLocale();
const carListTipsRef = ref();
const props = defineProps<{
  type: string;
}>();

defineExpose({
  open() {
    carListTipsRef.value.open();
  }
});
</script>

<template>
  <apt-popup-car
    ref="carListTipsRef"
    :showConfirmBtn="false"
    :title="
      type == 'CRS' ? t('TransferCarServiceCommitment') : t('TransferCarInnnServiceDescription')
    "
  >
    <view v-if="type == 'CRS'" class="apt-car-list-tips-crs-contain">
      <view class="apt-car-list-tips-crs-contain-item">
        <view class="apt-car-list-tips-crs-contain-item-t">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_tips_item.png"
          />
          {{ t('TransferCarPriceTransparency') }}
        </view>
        <view class="apt-car-list-tips-crs-contain-item-b">
          <text>{{ t('TransferCarPriceTransparencyInfo') }}</text>
        </view>
      </view>
      <view class="apt-car-list-tips-crs-contain-item">
        <view class="apt-car-list-tips-crs-contain-item-t">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_tips_item.png"
          />
          {{ t('TransferCarLicense') }}
        </view>
        <view class="apt-car-list-tips-crs-contain-item-b">
          <text>{{ t('TransferCarLicenseInfo') }}</text>
        </view>
      </view>
      <view class="apt-car-list-tips-crs-contain-item">
        <view class="apt-car-list-tips-crs-contain-item-t">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_tips_item.png"
          />
          {{ t('TransferCarDriver') }}
        </view>
        <view class="apt-car-list-tips-crs-contain-item-b">
          <text>{{ t('TransferCarDriverInfo') }}</text>
        </view>
      </view>
    </view>

    <view v-else-if="type == 'INNN'" class="apt-car-list-tips-innn-contain">
      <view class="apt-car-list-tips-innn-contain-item">
        <view class="apt-car-list-tips-innn-contain-item-t">
          {{ t('TransferCarInnnServiceProvider') }}
        </view>
        <view class="apt-car-list-tips-innn-contain-item-b">
          <text>{{ t('TransferCarInnnServiceProviderInfo') }}</text>
        </view>
      </view>
      <view class="apt-car-list-tips-innn-contain-item">
        <view class="apt-car-list-tips-innn-contain-item-t">
          {{ t('TransferCarInnnCostDescription') }}
        </view>
        <view class="apt-car-list-tips-innn-contain-item-b">
          <text>{{ t('TransferCarInnnCostDescriptionInfo') }}</text>
        </view>
      </view>
      <view class="apt-car-list-tips-innn-contain-item">
        <view class="apt-car-list-tips-innn-contain-item-t">
          {{ t('TransferCarLuggage') }}
        </view>
        <view class="apt-car-list-tips-innn-contain-item-b">
          <text>{{ t('TransferCarLuggageInfo') }}</text>
        </view>
      </view>
      <view class="apt-car-list-tips-innn-contain-item">
        <view class="apt-car-list-tips-innn-contain-item-t">
          {{ t('TransferCarCancelRule') }}
        </view>
        <view class="apt-car-list-tips-innn-contain-item-b">
          <text>{{ t('TransferCarCancelRuleInfo') }}</text>
        </view>
      </view>
      <view class="apt-car-list-tips-innn-contain-item">
        <view class="apt-car-list-tips-innn-contain-item-t">
          {{ t('TransferCarOtherInstructions') }}
        </view>
        <view class="apt-car-list-tips-innn-contain-item-b">
          <text>{{ t('TransferCarOtherInfo') }}</text>
        </view>
      </view>
    </view>
  </apt-popup-car>
</template>
<style lang="scss">
.apt-car-list-tips-crs-contain {
  padding-bottom: 30rpx;
  &-item {
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }

    &-t {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #3d3d3d;
      line-height: 44rpx;

      image {
        display: block;
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
      }
    }

    &-b {
      margin-top: 12rpx;

      text {
        font-weight: 400;
        font-size: 28rpx;
        color: #8c8c8c;
        line-height: 40rpx;
      }
    }
  }
}

.apt-car-list-tips-innn-contain {
  padding-bottom: 30rpx;
  &-item {
    margin-bottom: 32rpx;

    &:last-child {
      margin-bottom: 0;
    }

    &-t {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #3d3d3d;
      line-height: 40rpx;
    }

    &-b {
      margin-top: 16rpx;

      text {
        font-weight: 400;
        font-size: 24rpx;
        color: #3d3d3d;
        line-height: 34rpx;
      }
    }
  }
}
</style>
